<template>
	<view class="main-content">
		<you-tabs :tabsList="tabList" :activeName="activeName" tabActiveColor="#325EF5" bottomLineColor="#325EF5"
			@tabClick="clickTabItem">
		</you-tabs>
		<scroll-view scroll-y class="list-box" @scrolltolower="loadMore">
			<view v-for="(item,index) in itemLists" :key="index" class="list-item" @click="toDetail(item)">
				<view>
					<text>{{timestampToDate(item.createTime, 'ymdhm')}}</text>
					<text class="status" :style="{color:item.status===5?'#049c37':'#325ef5'}">
						{{getStatusLabel(item.status, Dictionary.classifyPlanStatus)}}</text>
				</view>
				<text class="title">{{item.device}}</text>
				<view class="describe text-ellipsis-two">{{item.remark}}</view>
				<scroll-view scroll-x class="imgs" style="width: 100%;">
					<view v-if="item.photo && item.photo != ''"
						:style="{width: 112 * item.photo.split(',').length + 'rpx'}">
						<image v-for="(items,indexs) in item.photo.split(',')" :key="indexs" :src="baseUrl+ items"
							mode="widthFix"></image>
					</view>
				</scroll-view>
				<view class="remark" v-if="item.status == 2 || item.status == 3">
					<text v-if="item.newArriveTime">当前进度：师傅修改了上门时间，预计上午 {{item.newArriveTime}} 到达</text>
					<text v-else>当前进度：{{getStatusLabel(item.status, messageList)}}</text>
				</view>
				<view v-if="item.status == 1 || item.status == 2">
					<text>预约上门时间：</text>
					<text>{{item.subscribeDate}}</text>
				</view>
				<view v-if="item.status == 4 || item.status == 5">
					<text></text>
					<view style="color:#cccccc;font-size: 24rpx;">
						总计: <text style="color:#325ef5;margin: 0 10rpx;font-weight: 600;font-size: 26rpx;">{{item.payMoney}}</text>元</view>
				</view>
				<!-- 完成 -->
				<view class="item-option" v-if="item.status == 4 || item.status == 5">
					<!-- <button @click="servicingInstallation(item)">查看维修设备更换报价表</button> -->
					<!-- <button @click="testReport(item)">查看检测报告<strong></strong></button> -->
				</view>
			</view>
			<view class="list_loading" v-if="isAllData != 0">
				<view class="loading" v-if="isAllData == '1'">
					正在加载，请稍候
					<uni-icons type="spinner-cycle" size="16" style="margin-left: 4px;"></uni-icons>
				</view>
				<view class="all-data" v-else>已加载全部数据~</view>
			</view>
		</scroll-view>
		<!-- <you-bottom-btn :btnConfig="bottomBtnConfig" @servicingInstallation="servicingInstallation"
			@testReport="testReport">
		</you-bottom-btn> -->
	</view>
</template>

<script>
	import Home from '@/api/home.js'
	import {
		baseUrl
	} from '@/config'
	import Dictionary from '@/utils/dictionary.js'
	import {
		timestampToDate
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				baseUrl,
				itemLists: [],
				scrollHeight: '',
				total: 0,
				pageInfo: {
					pageNum: 1,
					pageSize: 10
				},
				isAllData: '0',
				messageList: [{
						label: '师傅已接单，正在赶往',
						name: 2
					},
					{
						label: '服务进行中',
						name: 3
					}
				],
				tabList: [{
						label: '全部',
						name: ''
					},
					{
						label: '待接单',
						name: 1
					},
					{
						label: '已接单',
						name: 2
					},
					{
						label: '服务中',
						name: 3
					},
					{
						label: '已完成',
						name: 5
					},
				],
				activeName: '',
				bottomBtnConfig: [{
						text: '查看维修设备更换报价表',
						class: 'cancel',
						funcName: 'servicingInstallation'
					},
					{
						text: '查看检测报告',
						class: 'cancel',
						funcName: 'testReport'
					}
				],
				Dictionary
			}
		},
		onLoad() {
			console.log(this.$store.getters.heightData)
			this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 109 + 'px';
			this.listChange();
		},
		onShow() {
			// this.total = 0;
			// this.pageInfo = {
			// 	pageNum: 1,
			// 	pageSize: 10
			// }
			// this.itemLists = [];
			// this.listChange()
		},
		methods: {
			timestampToDate,
			toDetail(item) {
				// 1 维修订单    2 师傅维修单
				uni.navigateTo({
					url: "/subPages/home/master/reqairDetail?id=" + item.id + '&type=1&applyerId=' + item.applyerId
				})
			},
			getStatusLabel(status, list) {
				if (status == '') return '';
				let index = list.findIndex(ele => ele.value == status);
				console.log(index)
				return index > -1 ? list[index].label : '';
			},
			clickTabItem(value) {
				this.total = 0;
				this.pageInfo = {
					pageNum: 1,
					pageSize: 10
				}
				this.activeName = value;
				this.itemLists = [];
				this.listChange();
			},
			async listChange() {
				this.isAllData = '1';
				let res = await Home.getRepairOrderList({
					orderStatus: this.activeName,
					...this.pageInfo
				})
				let list = res.rows;
				this.itemLists.push(...list.map(ele => {
					return {
						...ele.wbRepairApply,
						id: ele.id,
						repairId: ele.wbRepairApply && ele.wbRepairApply.id || null,
						manHour: ele.manHour,
						manHourCost: ele.manHourCost,
						deviceRenewInfoDtos: ele.deviceRenewInfoDtos,
						payMoney: ele.payMoney,
						payTime: ele.payTime,
						payOrdernumber: ele.payOrdernumber
					}
				}));
				// console.log(this.itemLists,'this.itemLists');
				this.total = res.total;
				let {
					pageNum,
					pageSize
				} = this.pageInfo;
				if (pageNum >= this.total / pageSize) {
					this.isAllData = '2';
				} else {
					this.isAllData = '0';
				}
				console.log(this.isAllData)
			},
			loadMore() {
				let {
					pageNum,
					pageSize
				} = this.pageInfo;
				if (pageNum >= this.total / pageSize) {
					this.isAllData = '2';
					return;
				}
				this.$set(this.pageInfo, 'pageNum', pageNum + 1);
				this.listChange();
			},
			// 查看维修设备更换报价表
			servicingInstallation(item) {
				uni.navigateTo({
					url: '/subPages/home/servicingInstallation?id=' + item.id
				})
			},
			// 查看检测报告
			testReport(item) {
				uni.navigateTo({
					url: '/subPages/home/testReport'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.main-content {
		width: 100%;
		height: 100%;

		.list-box {
			padding: 20rpx 30rpx;
			height: calc(100vh - 108rpx);
			box-sizing: border-box;

			.list-item {
				background: #ffffff;
				padding: 20rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				>view {
					margin-bottom: 10rpx;
					display: flex;
					justify-content: space-between;

					&:last-child {
						margin: 0;
						margin-top: 20rpx;
					}

					>text {
						font-size: 24rpx;
						font-style: normal;
						font-weight: 400;
						line-height: 40rpx;

						&:nth-of-type(1) {
							opacity: 0.4;
						}

						&:nth-of-type(2) {
							color: #325ef5;
						}
					}

					.status {
						font-size: 28rpx;
						font-weight: 500;
					}
				}

				.title {
					display: block;
					font-size: 28rpx;
					font-style: normal;
					font-weight: 500;
					line-height: 40rpx;
					opacity: 0.9;
					margin-bottom: 10rpx;
				}

				.describe {
					display: flex;
					font-size: 24rpx;
					font-style: normal;
					font-weight: 400;
					line-height: 40rpx;
					opacity: 0.4;
					margin-bottom: 10rpx;
				}

				.imgs {
					view {
						image {
							width: 96rpx;
							height: 96rpx;
							background: #acacac;
							margin-right: 16rpx;

							&:last-child {
								margin: 0;
							}
						}
					}
				}

				.remark {
					padding: 15rpx 20rpx;
					background: #f6f8fa;
					border-radius: 16rpx;

					text {
						color: #325ef5;
						font-family: "PingFang SC";
						font-size: 24rpx;
						font-style: normal;
						font-weight: 400;
						line-height: normal;
						opacity: 1 !important;
					}
				}

				.item-option {

					// text-align: center;
					button {
						padding: 12rpx 20rpx;
						border: 2rpx solid #325EF5;
						color: #325EF5;
						font-size: 28rpx;
						line-height: 1;
						background: #fff;
						border-radius: 12rpx;
						margin: 0;
					}
				}
			}
		}
	}
</style>